<template>
  <div>

    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="showAddStoreAdminWindow">新增管理员</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <el-row style="margin-top: 20px;">
      <el-col :span="18" :offset="3">
        <el-table :data="storeAdminList" style="width: 100%">
          <el-table-column prop="storeAdminName" label="门店管理员姓名" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="storeName" label="管理门店名称" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180" align="center" label-align="center">
          </el-table-column>
          <el-table-column label="管理员状态" width="180" align="center" label-align="center">
            <template slot-scope="scope">{{ getStateText(scope.row.storeAdminState)}}</template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center" label-align="center">
            <template slot-scope="scope">
              <el-button @click="deleteAdmin(scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!--新增窗口-->
    <el-dialog title="新增管理员" :visible.sync="addStoreAdminWindow">
      <el-form :model="storeAdminAccount">

        <el-form-item label="姓名:">
          <el-input v-model="storeAdminAccount.storeAdminName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="密码:">
          <el-input type="password" v-model="storeAdminAccount.storeAdminPass" placeholder="请输入密码"
            show-password></el-input>
        </el-form-item>
<!--        <el-form-item label="请选择管理门店:">
          <el-select v-model="storeAdminAccount.storeId" placeholder="管理员门店" clearable>
            <el-option v-for="item in storeLiset" :key="item.storeId" :label="item.storeName"
              :value="item.storeId"></el-option>
          </el-select>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addStoreAdminWindow = false">取 消</el-button>
        <el-button type="primary" @click="addAdmin">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  export default {
    name: "StoreAdmin",
    data() {
      return {
        storeAdminList: [], //门店管理员账号集合
        addStoreAdminWindow: false, //新增管理员窗口
        storeAdminAccount: { //新增管理员参数
          storeAdminName: "", //管理员姓名
          storeId: "", //管理门店编号
          storeAdminPass: "", //管理员密码
        },
        storeLiset: [], //门店信息集合
        param: { //门店查询提供参数
          storeName: "", //门店名称
          pageSize: -1, //每页信息数
          pageNum: 1, //页码
        },
        headers: {},
        storeAdminId: "",
      }

    },

    methods: {
      //打开管理员新增窗口
      showAddStoreAdminWindow() {
        // 清空对象的值
        this.storeAdminAccount = {
          storeAdminName: '',
          storeId: '',
          storeAdminPass: ''
        };
        this.addStoreAdminWindow = true;
      },


      //新增
      addAdmin() {
        this.$http.post("person/storeAdmin/addStoreAdmin.api", this.storeAdminAccount).then(resp => {
          if (resp.data.code == "200") {
            this.SuccessTip(resp.data);
            this.addStoreAdminWindow = false;
            this.storeAdminAccount = {
              storeAdminName: '',
              storeId: '',
              storeAdminPass: ''
            };
            this.loadData();
          } else {
            this.ErrorTip(resp.data)
            this.storeAdminAccount = {
              storeAdminName: '',
              storeId: '',
              storeAdminPass: ''
            };
          }
        })
      },
      //删除管理员
      deleteAdmin(row) {
        this.storeAdminId = JSON.parse(JSON.stringify(row)).storeAdminId
        this.$http.get("/person/storeAdmin/deleteStoreAdmin.api", {
          params: {
            storeAdminId: this.storeAdminId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.loadData()
            this.SuccessTip(resp.data);
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //查所有管理员
      loadData() {
        this.$http.get("/person/storeAdmin/listStoreAdmin.api").then(resp => {
          if (resp.data.code == 200) {
            this.storeAdminList = resp.data.data
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //查询所有门店
      loadAllStore() {
        this.$http.post("/person/store/storeList.api", this.param).then(resp => {
          if (resp.data.code == 200) {
            this.storeLiset = resp.data.data.records
          } else {
            this.ErrorTip(resp.data)
          }
        })
      },
      //状态
      getStateText(state) {
        switch (state) {
          case 0:
            return '正常';
          case 1:
            return '禁用';
          case 2:
            return '删除';
          default:
            return '未知状态';
        }
      },
      SuccessTip(data) { //成功
        if (data.code === 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'success'
          });
        }
      },
      ErrorTip(data) { //失败
        if (data.code !== 200) {
          // 如果code为200，则弹出绿色的提示框
          this.$message({
            message: data.msg,
            type: 'error'
          });
        }
      },
    },
    created() {
      this.loadData();
      this.loadAllStore();
      this.headers["token"] = localStorage.getItem("token");
    }
  }
</script>

<style>
</style>
